CSS定位
position 实现CSS定位
Position 把元素放在一个静态的、相对的、绝对的、或者固定的位置中
position:static
静态定位；标准流中所有元素都是静态定位。设置position:static的元素， 会同设置position: relative的显示效果一样；但是元素不能设置上下左右的偏移量。
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
PS： 静态定位其实没啥可说的。
position: relative
相对的；在position: relative下，我们可以设置元素上下左右的偏移量。设置了偏移量，那么元素会以原来的位置发生偏移。
Position：relative：
特点：
1.相对于原来的位置发生偏移。
2.设置了相对定位的元素在页面仍占据位置。
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留，而且移动的位置是相对于自身原来的位置来说的。
position:absolute
绝对的；设置了position:absolute的元素，在页面中不再占有位置，但同样会显示其内容；也可以元素上下左右的偏移量。
1.绝对定位元素没有父元素，那么偏移量就相对于浏览器可视区（不是相对于body ) 来定位的。
2.绝对定位元素有父元素，但父元素没有定位，那么偏移量仍然相对于浏览器可视区（不是相对于body ) 来定位的。
3.如果绝对定位元素有父元素，而且父元素有定位（非position:static），那么这个绝对定位的元素以父元素为基础进行偏移。
4.如果只是给盒子指定了绝对定位，但是没有给偏移量，则该盒子以标准流来显示排序，和上一个盒子的底边对齐，会显示其内容，但是不占有位置。（会覆盖了后面的盒子）
总结：将来写页面用的最多的是绝对定位与相对定位一起用。（子绝父相：子元素使用绝对定位，父元素使用相对定位）
position:fixed
固定定位；设置position:fixed的元素，将会固定在页面，不会随页面滚动而滚动。也可以元素上下左右的偏移量。
1.不管页面多大，偏移量永远是相对浏览器的边框来设置的。
2.固定定位的元素也脱离了标准流，不会在页面占据位置。
定位总结
static 不脱标，正常模式，不可以使用边偏移，正常模式。
relative 不脱标，占有位置，可以使用边偏移，相对自身位置移动。
absolute 完全脱标，不占有位置，可以使用边偏移，相对于定位父级移动位置。
fixed 完全脱标，不占有位置，可以使用边偏移，相对于浏览器移动位置。
定位模式转换
跟 浮动一样， 元素添加了绝对定位或者固定定位之后（静态、相对定位不可以，因为他俩没脱标），元素模式也会发生转换， 都转换为行内块模式，因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后，可以不用转换模式，直接给高度和宽度就可以了。 要通栏就加width100%。
